<template>
  <view class="container">

    <u-form :model="leaveStatus" ref="uForm" label-width="180">
      <u-form-item label="请假起始日期" prop="beginDate">
        <u-input v-model="leaveStatus.beginDate" disabled/>
      </u-form-item>
      <u-form-item label="请假结束日期" prop="endDate">
        <u-input v-model="leaveStatus.endDate" disabled/>
      </u-form-item>
      <u-form-item label="请假天数">
        <u-input v-model="leaveStatus.leaveDays" disabled/>
      </u-form-item>
      <u-form-item label="当前操作">
        <u-input v-model="leaveStatus.leaveTypeDesc" disabled/>
      </u-form-item>
      <u-form-item label="审核状态">
        <u-input v-model="leaveStatus.auditStatusDesc" disabled/>
      </u-form-item>
      <u-form-item label="审核人">
        <u-input v-model="leaveStatus.operatorName" placeholder="" disabled/>
      </u-form-item>
      <u-form-item label="请假原因" prop="leaveReason">
        <u-input v-model="leaveStatus.leaveReason" type="textarea" :border="true" placeholder=""
                 disabled/>
      </u-form-item>

      <u-button type="error" shape="square" :ripple="true" size="default" @click="preSubmit" class="custom-btn"
      >{{ btnText }}
      </u-button>
    </u-form>

    <!-- 确认对话框 -->
    <u-modal
        v-model="showModal"
        :content="modalText"
        @confirm="submit"
        @cancel="onCancel"
        show-cancel-button
    ></u-modal>

    <!-- Toast -->
    <u-toast ref="uToast"/>

  </view>
</template>

<script>
import askLeaveApi from "@/api/modules/askLeave";
import {handleGoTo} from '@/utils/askLeaveRouter.js'

export default {
  name: "LeaveRequest",
  data() {
    return {
      // 请假状态
      leaveStatus: {
        beginDate: '',
        endDate: '',
        leaveDays: 0,
        auditStatusDesc: '',
        operatorName: '',
        leaveTypeDesc: ''
      },
      // 请假配置
      askLeaveConfig: {
        enableAlAudit: false
      },
      form: {
        // 起始日期
        beginDate: null,
        // 结束日期
        endDate: null,
        // 请假理由
        leaveReason: null,
        // 请假天数
        askLeaveDays: 0,
        // 请假天数描述
        askLeaveDaysStr: '共请假0天',
      },
      // 是否显示确认对话框
      showModal: false,
      // 按钮提示文字
      btnText: '',
      // 弹窗提示文字
      modalText: '',
      // 是否可以提交请求
      canSubmit: true,
      // 当前模式 1-撤销请假 2-结束请假
      curMode: ''
    }
  },
  methods: {
    // 预提交
    async preSubmit() {
      if (this.canSubmit) {
        this.showModal = true
      }
    },
    // 提交
    async submit() {
      if (!this.canSubmit) {
        return
      }
      if (this.curMode === '1') {
        await this.cancel()
      } else if (this.curMode === '2') {
         await this.end()
      }
      // 重新交由路由机制处理
      setTimeout(() => handleGoTo(), 2000)
    },
    // 撤销请假
    async cancel() {
      try {
        const res = await askLeaveApi.cancelAskLeave(this.leaveStatus.id)
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '撤销请假成功',
            type: 'success',
          })
        }
      } catch (e) {
      }
    },
    // 结束请假
    async end() {
      try {
        const res = await askLeaveApi.endAskLeave(this.leaveStatus.id)
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '结束休假成功',
            type: 'success',
          })
        }
      } catch (e) {
      }
    },
    // 查询当前请假状态
    async getAskLeaveStatus() {
      try {
        const res = await askLeaveApi.getAskLeaveStatus()
        this.leaveStatus = res.data.data
        this.initButtonConfig()
      } catch (e) {
        console.log(e)
      }
    },
    // 取消提交
    onCancel() {
      this.showModal = false
    },
    // 查询当前请假配置
    async getAskLeaveConfig() {
      const res = await askLeaveApi.getAskLeaveConfig()
      this.askLeaveConfig = res.data.data
    },
    // 初始化按钮信息
    initButtonConfig() {
      // 撤销请假待审核
      if (this.leaveStatus.leaveType === '1' && this.leaveStatus.auditStatus === '0') {
        this.btnText = '撤销请假待审核中'
        this.canSubmit = false
        return;
      }
      // 结束休假待审核
      if (this.leaveStatus.leaveType === '2' && this.leaveStatus.auditStatus === '0') {
        this.btnText = '结束休假待审核中'
        this.canSubmit = false
        return;
      }
      // 休假未开始
      if (this.leaveStatus.leaveType === '0' && this.leaveStatus.recordStatus === '0') {
        this.btnText = '撤销请假'
        this.modalText = '确定撤销本次请假?'
        this.curMode = '1'
        return
      }
      // 休假中
      if (this.leaveStatus.leaveType === '0' && this.leaveStatus.recordStatus === '1') {
        this.btnText = '结束休假'
        this.modalText = '确定提前结束本次休假?'
        this.curMode = '2'
      }
    }
  },
  onReady() {
    this.getAskLeaveStatus()
    this.getAskLeaveConfig()
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;

  .custom-btn {
    margin: 15px auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .light-text {
    color: rgb(192, 196, 204);
  }

  .normal-text {
    color: #303133;
  }

  .error-text {
    color: #FA3B3A;
  }

}
</style>
